
<template>
<div>

    <el-button
            size="mini"
            type="primary"
            @click="insertUser">添加用户</el-button>

    <el-table
            :data="tableData"
            style="width: 100%">
        <el-table-column
                prop="uid"
                label="编号"
        >
        </el-table-column>
        <el-table-column
                prop="email"
                label="用户名"
        >
        </el-table-column>
        <el-table-column
                prop="nikename"
                label="昵称">
        </el-table-column>
        <el-table-column
                prop="password"
                label="密码">
        </el-table-column>
        <el-table-column label="操作">
            <template slot-scope="scope">
                <el-button
                        size="mini"
                        @click="updateRow(scope.row)">修改</el-button>
                <el-button
                        size="mini"
                        type="danger"
                        @click="deleteRow(scope.row.uid)">删除</el-button>
            </template>
        </el-table-column>
    </el-table>
    <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[5, 10, 15, 20]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
    </el-pagination>
        <el-dialog
            title="修改用户信息"
            :visible.sync="dialogVisible"
            width="30%"
            :before-close="handleClose">
            <el-form ref="userFrm" :model="userForm" label-width="80px">
                <el-form-item label="邮箱" prop="email">
                    <el-input v-model="userForm.email"></el-input>
                </el-form-item>
                <el-form-item label="昵称" prop="nikename">
                    <el-input v-model="userForm.nikename"></el-input>
                </el-form-item>
                <el-form-item label="密码" prop="password">
                    <el-input v-model="userForm.password"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="confirmUpdate">确 定</el-button>
        </span>
    </el-dialog>

    <el-dialog
            title="添加用户"
            :visible.sync="dialogVisible2"
            width="30%"
            :before-close="handleClose">
        <el-form ref="userFrm" :model="userForm2" label-width="80px">
            <el-form-item label="邮箱" prop="email">
                <el-input v-model="userForm2.email"></el-input>
            </el-form-item>
            <el-form-item label="昵称" prop="nikename">
                <el-input v-model="userForm2.nikename"></el-input>
            </el-form-item>
            <el-form-item label="密码" prop="password">
                <el-input v-model="userForm2.password"></el-input>
            </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
            <el-button @click="resetForm">重置</el-button>
            <el-button type="primary" @click="confirmInsert">确 定</el-button>
        </span>
    </el-dialog>
</div>
</template>

<script>
    export default {
        name: "Home",
        data(){
            return{
                tableData:[],
                dialogVisible:false,
                dialogVisible2:false,
                userForm:{},
                userForm2:{},
                currentPage:1,
                pageSize:5,
                total:0,
            }
        },
        created() {
            this.initTablePage();
        },
        methods:{
            initTable(){
                this.$http.get("http://localhost:8090/user/list").then(resp=>{
                    if (resp.data.code==2000){
                        this.tableData=resp.data.data;
                    }
                })
            },
            initTablePage(){
                this.$http.get("http://localhost:8090/user/find?currentPage="+this.currentPage+"&pageSize="+this.pageSize).then(resp=>{
                    if (resp.data.code==2000){
                        this.tableData=resp.data.data.records;
                        this.total=resp.data.data.total;
                    }else if (resp.data.code==4001){
                        this.$message.error("未登录");
                        this.$router.push("/");
                    }
                })
            },
            updateRow(row){
                this.dialogVisible=true;
                this.userForm=row;
            },
            deleteRow(uid){
                this.$http.post("http://localhost:8090/user/delete?uid="+uid).then(resp=>{
                    if (resp.data.code==2000){
                        this.$message.success("删除成功");
                        this.initTablePage();
                    }
                })
            },
            confirmUpdate(){
                this.dialogVisible=false;
                this.$http.post("http://localhost:8090/user/update",this.userForm).then(resp=>{
                    if (resp.data.code==2000){
                        this.$message.success("修改成功");
                        this.initTablePage();
                    }
                })
            },
            insertUser(){
                this.dialogVisible2=true;
            },
            confirmInsert(){
                this.$http.post("http://localhost:8090/user/insert",this.userForm2).then(resp=>{
                    if (resp.data.code==2000){
                        this.$message.success("添加成功");
                        this.dialogVisible2=false;
                        this.initTablePage();
                    }
                    this.userForm2={};
                })
            },
            resetForm(){
                this.userForm2={};
            },
            handleClose(done) {
                this.$confirm('确认关闭？')
                    .then(_ => {
                        done();
                    })
                    .catch(_ => {});
                this.userForm2={};
            },
            handleSizeChange(val) {
                this.pageSize=val;
                this.initTablePage();
            },
            handleCurrentChange(val) {
                this.currentPage=val;
                this.initTablePage();
            },
        }
    }
</script>

<style scoped>

</style>